<template>
	<!-- banner轮播 -->
	<view class="diy-banner">
	  <swiper :autoplay="autoplay" :class="['banner-box','swiper-box','dot-'+itemStyle.btnShape]  " :duration="duration" :circular="true" :indicator-dots="indicatorDots" :interval="params.interval" :indicator-color="itemStyle.btnColor" indicator-active-color="#000"
	    @change="_bindChange" :data-item-key="itemIndex" :style="{height: imgHeights[imgCurrent] +'rpx'}">
	    <swiper-item v-for="(banner,index) in dataList" :key="index">
	      <image mode="widthFix" @click="navigationTo" :data-url="banner.linkUrl" class="slide-image" @load="_imagesHeight" :src="banner.imgUrl" :data-id="index" :data-item-key="itemIndex"></image>
	    </swiper-item>
	  </swiper>
	  <!-- 顶部置灰 -->
	  <!-- <view class="linear"></view>  -->
	</view>
</template>

<script>
	export default {
		name: "diy",
	
		props: {
			 itemIndex: String,
			    itemStyle: Object,
			    dataList: Array,
			    params: Object
		},
		data() {
			return {
	  // banner轮播组件属性
	    indicatorDots: true, // 是否显示面板指示点	
	    autoplay: true, // 是否自动切换
	    duration: 800, // 滑动动画时长
	
	    imgHeights: [], // 图片的高度
	    imgCurrent: 0, // 当前banne所在滑块指针
			};
		},
		 methods: {
		
		    /**
		     * 计算图片高度
		     */
		    _imagesHeight: function(e) {
		      // console.log(111,e)
		      // 获取图片真实宽度
		      let imgwidth = e.detail.width,
		        imgheight = e.detail.height,
		        // 宽高比
		        ratio = imgwidth / imgheight;
		        
		      // 计算的高度值
		      let viewHeight = 750 / ratio,
		        imgHeights = this.imgHeights;
		      // 把每一张图片的高度记录到数组里
		      imgHeights.push(viewHeight);
					this.imgHeights= imgHeights
		      console.log(this.imgHeights)
		    },
		
		    /**
		     * 记录当前指针
		     */
		    _bindChange: function(e) {
					this.imgCurrent=e.detail.current
		    },
		
		    /**
		     * 跳转到指定页面
		     */
		    navigationTo(e) {
		    
		    },
		
		  }
		
	}
</script>

<style scoped>
	/* banner轮播 */
	
	.diy-banner {
	  position: relative;
	  /* height: 400rpx; */
	}
	
	.diy-banner .slide-image {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  margin: 0 auto;
	  display: block;
	}
	
	/* 顶部置灰 */
	
	.diy-banner .linear {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 3.4rem;
	  background: linear-gradient(#111, transparent);
	  opacity: 0.6;
	  z-index: 9;
	}
	
	.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
	  margin-bottom: 2rpx;
	}
	
	/* banner组件按钮 */
	
	.swiper-box .wx-swiper-dot {
	  height: 20rpx;
	  width: 20rpx;
	}
	
	.swiper-box.dot-rectangle .wx-swiper-dot {
	  width: 30rpx;
	  border-radius: unset;
	}
	
	.swiper-box.dot-square .wx-swiper-dot {
	  border-radius: unset;
	}

</style>
